
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div class="app-container">
    <div class="box">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="chart1" style="width: 1200px;height: 600px"></div>
    </div>
</div>
</body>
<script src="/js/axios.js"></script>
<script src="/js/echarts.js"></script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    let myChart1 = echarts.init(document.getElementById('chart1'));
    let url = '${pageContext.request.contextPath}/store/piechart/pie';


    axios.get(url).then((res)=>{
        console.log('数据：',res)
        let option ={
            title : {
                text: '性别比例',
               // subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {//提示框组件
                trigger: 'item',//触发类型，在饼形图中为item
                formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: res.data.sex
            },
            series : [
                {
                    name: '性别比例',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:res.data.sexCount,
                    /*[{value: 1048, name: '男'},
                        {value: 735, name: '女'}],*/
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        myChart1.setOption(option);
    });
</script>
</html>
